<template>
  <div class="topic_outer" id="topic">
    <!-- 左侧话题列表 鼠标移入会显示x 以提供删除话题的选择 -->
    <div class="topic_left">
      <div class="topic_left_list first">全 部 话 题</div>
      <div
        class="topic_left_list size_small"
        v-for="t in topicList"
        :key="t.id"
      >
        <!-- 通过循环遍历话题的标题信息并展示 -->
        {{ t.tag_name }}
        <span class="delete" @click="delete_Topic(t)">x</span>
      </div>
    </div>
    <!-- 右侧操作话题的内容块 可进行添加图片 -->
    <div class="topic_right">
      <form @submit.prevent="demo" class="form">
        <h1>添加话题</h1>
        <label class="label"
          >话 题 名 : &nbsp;&nbsp;
          <el-input
            class="input_topic"
            v-model="topic_name"
            placeholder="Please input topic name"
            clearable
        /></label>
        <h2>请在下方选择一个话题图片</h2>

        <input class="file" ref="x" type="file" id="fileInput" />

        <el-button type="danger" @click="addTopic">添 加</el-button>
      </form>
    </div>
  </div>

  <!-- 遮罩提示 -->
  <div v-if="isShow" class="mask">
    <div class="dialog">
      <div>
        <h3>提示信息</h3>
        <h4>是否删除{{ fornowdata }}话题!!!</h4>
        <el-button class="btn_location" type="danger" @click="isShow = false"
          >取 消</el-button
        >
        <el-button type="info" @click="realDelete">确 定</el-button>
      </div>
    </div>
  </div>

  <div v-if="isWin" class="mask">
    <div class="dialog">
      <div>
        <h3>提示信息</h3>
        <h4>话题"{{ topic_name }}"添加成功</h4>
        <el-button type="info" @click="isWin = false">确 定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Topic",
  data() {
    return {
      // 遮罩提示
      isWin: false,
      topic_name: "",
      // isShow对应的是是否显示遮罩
      isShow: false,
      // fornowdata用于存放当前管理员点击的话题数据信息
      fornowdata: "",
      // topicList用于存放获取到的话题列表信息
      topicList: {},
      img:''
    };
  },
  methods: {
    addTopic() {
      // 添加话题 需进行判断是否已存在该话题
      let judge = [...this.topicList].some((item) => {
        return item.tag_name == this.topic_name.trim();
      });
      if (judge) {
        alert("该话题已拥有");
        return;
      }
      // 查看是否选择了图片信息
      let file = this.$refs.x.files[0];
      if (file === undefined || this.topic_name === "") {
        return alert("请输入话题名并选择文件");
      }
      // 上传图片信息
      this.uploadTopic(file);
    },
    uploadFile(file) {
      const InspireCloud = require("@byteinspire/js-sdk");
      const serviceId = "qcljo8";
      const inspirecloud = new InspireCloud({ serviceId });

      const formData = new FormData();

      formData.append("myFile", file);
      let x = "";
      return inspirecloud
        .run("uploadFile", formData, {
          headers: {
            "content-type": "multipart/form-data",
          },
        })
        .then((res) => {
          console.log("@", res);
          this.img = res
        });
    },
    async uploadTopic(file) {
      await this.uploadFile(file)
      axios({
        method: "post",
        url: "https://qcljo8.api.cloudendpoint.cn/AddTopic",
        data: {
          tag_name: this.topic_name.trim(),
          tag_img: this.img,
        },
      }).then(
        (response) => {
          axios.get("https://qcljo8.api.cloudendpoint.cn/GetTopic").then(
            (response) => {
              this.topicList = "";
              this.topicList = response.data;
              this.isWin = true;
            },
            (error) => {
              console.log(error.message);
            }
          );
        },
        (error) => {
          console.log(error.message);
        }
      );
    },
    delete_Topic(value) {
      // 删除话题 先暂存话题的信息
      this.isShow = true;
      this.fornowdata = value.tag_name;
    },
    realDelete() {
      // 弹出确认删除面板 在这里进行删除操作
      this.isShow = false;
      axios
        .get(
          `https://qcljo8.api.cloudendpoint.cn/deleteTopic?tag_name=${this.fornowdata}`
        )
        .then(
          (res) => {
            setTimeout(() => {
              // 同样 重新获取话题列表的信息 避免重复操作
              axios.get("https://qcljo8.api.cloudendpoint.cn/GetTopic").then(
                (response) => {
                  this.topicList = "";
                  this.topicList = response.data;
                },
                (error) => {
                  console.log(error.message);
                }
              );
            }, 500);
          },
          (err) => {
            console.log(err.message);
          }
        );
    },
  },
  mounted() {
    // 挂载完毕后给话题信息赋值
    axios.get("https://qcljo8.api.cloudendpoint.cn/GetTopic").then(
      (response) => {
        this.topicList = response.data;
      },
      (error) => {
        console.log(error.message);
      }
    );
  },
};
</script>

<style lang="less" scoped>
@bordercolor:rgb (170, 170, 170);
.topic_outer {
  height: 100%;
  color: white;
  .topic_left {
    width: 39.5%;
    height: 100%;
    float: left;
    .topic_left_list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 7%;
      font-size: 20px;
      border: 1px solid rgb(170, 170, 170);
      border-top: 0px;
      .delete {
        display: none;
        position: absolute;
        right: 5%;
        color: #ddd;
        cursor: pointer;
      }

      &:hover .delete {
        display: block;
      }
    }
    .size_small {
      font-size: 16px;
    }
    .first {
      border-top: 1px solid rgb(170, 170, 170);
    }
  }

  .topic_right {
    position: fixed;
    left: 48%;
    width: 48%;
    height: 80%;
    .form {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 60%;
      height: 80%;
      .label {
        display: block;
        margin-bottom: 10%;
      }
      h1 {
        font-size: 24px;
        margin: 20% 0 5% 0;
      }
      .input_topic {
        width: 80%;
      }
      h2 {
        font-size: 16px;
        margin-bottom: 5%;
      }
    }
  }
}

.mask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);

  .dialog {
    width: 300px;
    height: 300px;
    background-color: rgba(145, 145, 145, 0.5);
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    div {
      h3 {
        margin: 20% 0 10% 0;
      }
      h4 {
        margin-bottom: 10%;
      }
      .btn_location {
        margin-right: 20%;
      }
    }
  }
}
</style>